<template>
  <el-card>
    <!-- 筛选表单区域 -->
    <el-row type="flex" justify="space-between">
      <div>
        <el-form :inline="true">
          <el-form-item size="small">
            <el-input
              v-model="queryData.subject_name"
              placeholder="学科名称"
            ></el-input>
          </el-form-item>
          <el-form-item size="small">
            <el-select v-model="queryData.is_show" placeholder="显示状态">
              <el-option
                v-for="item in is_show"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item size="small">
            <el-button @click="initData" type="primary" plain>搜索</el-button>
            <el-button @click="resetSearch">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 新增操作区域 -->
      <div>
        <el-button @click="dialogShow = true" type="primary" plain
          >创建学科</el-button
        >
      </div>
    </el-row>
    <!-- 表格区域 -->
    <el-table :data="list" border style="width: 100%">
      <el-table-column align="center" label="序号" type="index" width="100px">
      </el-table-column>
      <el-table-column align="center" prop="id" label="学科ID" width="70px">
      </el-table-column>
      <el-table-column align="center" prop="subject_name" label="学科名称">
      </el-table-column>
      <el-table-column align="center" prop="subject_icon" label="学科图标">
        <template slot-scope="{ row }">
          <el-image
            v-if="row.subject_icon != ''"
            style="width: 50px; height: 50px; border-radius: 50%"
            :src="'http://192.168.19.82:7005/' + row.subject_icon"
          ></el-image>
          <span v-else>暂无</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="username" label="创建人">
      </el-table-column>
      <el-table-column
        align="center"
        prop="is_show"
        label="是否显示"
        width="140px"
      >
        <template slot-scope="{ row }">
          <el-switch
            @change="isShowFn(row)"
            v-model="row.is_show"
            :active-value="1"
            :inactive-value="2"
            active-text="是"
            inactive-text="否"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column align="center" width="140px" label="目录数量">
        <template slot-scope="{ row }">
          <el-link
            @click="cateFn(row.id)"
            v-if="row.cate_num > 0"
            type="primary"
          >
            {{ row.cate_num }}
            <i :class="row.cate_num > 0 ? 'el-icon-paperclip' : ''"></i>
          </el-link>
          <span v-else>0</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="{ row }">
          <el-row type="flex" justify="center">
            <el-button
              @click="editHandler(row.id)"
              icon="el-icon-edit"
              circle
              size="small"
              type="primary"
            ></el-button>
            <el-button
              @click="delHandler(row.id)"
              icon="el-icon-delete"
              circle
              size="small"
              type="danger"
            ></el-button>
          </el-row>
        </template>
      </el-table-column>
    </el-table>
    <br />
    <!-- 分页区域 -->
    <el-row type="flex" justify="end">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryData.page"
        :page-sizes="[10, 5, 2]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background
      >
      </el-pagination>
    </el-row>
    <!-- 新增/修改弹框区域 -->
    <el-dialog
      :title="this.formData.id ? '修改学科' : '添加学科'"
      :visible.sync="dialogShow"
      @close="handleClose"
    >
      <!-- 绘制表单 -->
      <el-form
        label-width="200px"
        :model="formData"
        :rules="formRules"
        ref="form"
      >
        <el-form-item prop="subject_name" label="学科名称">
          <el-input
            v-model="formData.subject_name"
            placeholder="请输入学科名称"
          ></el-input>
        </el-form-item>
        <el-form-item prop="sort" label="排序">
          <el-input-number
            v-model="formData.sort"
            @change="handleChange"
            :min="10"
            :max="100"
          ></el-input-number>
        </el-form-item>
        <el-form-item prop="is_show" label="是否显示">
          <el-switch
            v-model="formData.is_show"
            active-text="是"
            inactive-text="否"
            :active-value="1"
            :inactive-value="2"
            @change="changeSex"
          >
          </el-switch>
        </el-form-item>
        <el-form-item label="学科图标">
          <ImageUpload @change="(val) => (formData.subject_icon = val)" />
          <span>推荐尺寸:200*200</span>
        </el-form-item>
      </el-form>
      <el-row type="flex" justify="end">
        <el-button @click="dialogShow = false">取 消</el-button>
        <el-button type="primary" @click="btnOK">确 定</el-button>
      </el-row>
    </el-dialog>
  </el-card>
</template>

<script>
import {
  getSubjectListApi,
  getSubjectInfoApi,
  addSubjectApi,
  editSubjectApi,
  delSubjectApi,
} from "@/api/subject/subject.js";

export default {
  name: "Subject",
  props: {
    uploadMaxMum: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {
      list: [],
      is_show: [
        {
          value: "1",
          label: "显示",
        },
        {
          value: "2",
          label: "隐藏",
        },
      ],
      queryData: {
        subject_name: "",
        is_show: "",
        page: 1,
        limit: 10,
      },
      total: 0,
      dialogShow: false,
      formData: {
        is_show: "",
        sort: "",
        subject_name: "",
        subject_icon: "",
      },
      formRules: {
        is_show: [{ required: true, message: "请输入", trigger: "blur" }],
        sort: [{ required: true, message: "请输入", trigger: "blur" }],
        subject_name: [{ required: true, message: "请输入", trigger: "blur" }],
      },
    };
  },
  created() {
    //调用方法
    this.initData();
  },
  methods: {
    //定义方法
    async initData() {
      let { list, total } = await getSubjectListApi(this.queryData);
      this.list = list;
      this.total = total;
    },
    //提交事件逻辑
    async btnOK() {
      try {
        //表单校验
        await this.$refs.form.validate();
      } catch (error) {
        return console.log(error);
      }
      if (this.formData.id) {
        await editSubjectApi(this.formData);
      } else {
        await addSubjectApi(this.formData);
      }
      this.$message.success("操作成功");
      this.dialogShow = false;
      this.initData();
    },
    async editHandler(id) {
      let res = await getSubjectInfoApi(id);
      console.log(res);
      this.dialogShow = true;
      this.formData = res;
    },
    async delHandler(id) {
      await this.$confirm("确认删除吗");
      await delSubjectApi(id);
      this.$message.success("删除成功");
      this.initData();
    },
    handleClose() {
      this.formData = {};
      this.dialogShow = false;
    },
    resetSearch() {
      this.queryData.subject_name = "";
      this.queryData.is_show = "";
      this.initData();
    },
    handleSizeChange(val) {
      this.queryData.limit = val;
      console.log(val);
      this.initData();
    },
    handleCurrentChange(val) {
      this.queryData.page = val;
      this.initData();
    },
    handleChange(val) {
      console.log(val);
    },
    changeSex(val) {
      console.log(val);
      this.formData.is_show = val;
    },
    async isShowFn(val) {
      console.log(val);
      await editSubjectApi({ id: val.id });
      this.$message.success("切换成功");
    },
    cateFn(id) {
      // let subject_id = id;
      console.log(id);
      this.$router.push({
        name: "/subject/directory",
        query: { subject_id: id },
      });
    },
  },
};
</script>

<style>
.text {
  font-size: 17px;
  margin-left: 20px;
  color: #4aa3ff;
  text-decoration: none;
  border-bottom: 1px solid #4aa3ff;
}
</style>
